<template>
	<view style="background-color: #FFFFFF;">
		<u-row style="margin-top: 10rpx;" >
			<u-col span="12">
				<!-- 楼主信息 -->
				<view @click="showitem(disscussions.id)">
					<!-- 帖子创建人信息 -->
				<u-row>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
					<u-col span="2">
						<u-avatar :src="disscussions.createdHead"></u-avatar>
					</u-col>
					<u-col span="7">
						<view style="font-size: 35rpx;font-weight: 700">{{disscussions.createdBy}}</view>
						<view style="font-size: 23rpx; color: #808080;">创建于：{{disscussions.createDate|datafmt}}</view>
					</u-col>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
				</u-row>
				
				<!-- 标题 -->
				<u-row>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
					<u-col span="10" class="u-line-1">
						<text style="font-weight: 700;font-size: 37rpx;">{{disscussions.title}}</text>
					</u-col>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
				</u-row>
				
				<!-- 内容摘要 -->
				<u-row>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
					<u-col span="10" >
						<text class="u-line-3">{{disscussions.content}}</text>
					</u-col>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
				</u-row>
				</view>
				<u-row >
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
					<!-- 是否包含图片 -->
					<image style="height: 250rpx;"  @click="preimg(imgs)" v-if="disscussions.img==null?false:true" mode="aspectFit" :src="imgs">
					</image>
					<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
				</u-row>
				
				<!-- 点赞评论信息等 -->
				<u-divider border-color="#999999" :use-slot="false" :half-width="300" height="30"></u-divider>
				<u-row>
					<u-col span="4" style="text-align: center;">
						<span @click="showshare(disscussions.id)" >
							<u-icon name="share"></u-icon><text>{{disscussions.forward}}</text>
						</span>
					</u-col>
					<u-col span="4" style="text-align: center;">
						<span @click="showcomment(disscussions.id)"  >
							<u-icon name="chat"></u-icon><text>{{disscussions.comments}}</text>
						</span>
					</u-col>
					<u-col span="4" style="text-align: center;">
						<span @click="showToast(disscussions.id)">
							<u-icon :name="disscussions.likes|likefmt(disscussions.id,ulike)" :style="disscussions.likes|colorfmt(disscussions.id,ulike)" id="likeicon"></u-icon><text >{{disscussions.likes}}</text>
						</span>
					</u-col >
				</u-row >
				<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="750" height="20" bg-color="#f4f4f5">
				</u-divider>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					showc: false,
					showf: false,
					showl: false,
					disindex:0,
					comments:[],
					icons:[],
					// 获取图片，因为是传到服务器的，所以组装成一个请求
					imgs:this.baseurl+"cDiscussion/getimg?img="+this.disscussions.img
			}
		},
		methods: {
			showcomment(id){
				this.$emit("showc",id);
			},
			showToast(id){
				this.$emit("showt",id);
			},
			showshare(id){
				this.$emit("shows",id);
			},
			showitem(id){
				this.$emit("showi",id);
			},
			preimg(it){
				console.log("预览")
				//预览图片方法
				uni.previewImage({
					//当前要预览的哪一张：用current来接收
					//urls：预览的图片数组地址
					current:it,
					urls:[this.imgs],
					loop:true, //循环滚动
					indicator:"number" //预览开启下标
				})
				}
			
			
			
		},
		filters: {
			// 日期过滤
			datafmt(arg1) {
				var a = arg1 + "";
				return a.substring(5, 10);
			},
			// 点赞过滤及渲染
			likefmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return "thumb-up-fill"
					}
				}
				return "thumb-up"
			},
			// 点赞颜色过滤渲染
			colorfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return 'color: #18B566;'
					}
				}
				return ""
			}
				
		},
		props:['disscussions',"ulike"],

	}
</script>

<style>
.uni-padding-wrap {
		padding: 300upx;
		color: $u-type-warning;
	}


	.demo-layout {
		height: 300rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.imagehead {
		width: 150rpx;
		height: 150rpx;
		margin-top: 40rpx;
		border-radius: 30upx;

	}
	.like{
		color:#18B566
	}
	.unlike{
		color: #000000;
	}

	.pices {
		height: 100%;
	}
	text{
		 word-wrap: break-word;
	}
</style>
